<script setup>
import VideoCard from './VideoCard.vue'

// 模拟视频数据，实际项目中应该从API获取
const videos = [
  {
    id: 1,
    title: '2024东莞理工学院新年晚会精彩回顾',
    thumbnail: 'https://picsum.photos/400/225',
    views: 1200,
    duration: '15:30'
  },
  {
    id: 2,
    title: '计算机学院创新实验室介绍',
    thumbnail: 'https://picsum.photos/400/225',
    views: 800,
    duration: '08:45'
  },
  {
    id: 3,
    title: '东莞理工大学城校区航拍',
    thumbnail: 'https://picsum.photos/400/225',
    views: 2500,
    duration: '12:20'
  },
  {
    id: 4,
    title: '2023年度学生作品展示',
    thumbnail: 'https://picsum.photos/400/225',
    views: 1500,
    duration: '10:15'
  },
  {
    id: 5,
    title: '校园生活Vlog：图书馆的一天',
    thumbnail: 'https://picsum.photos/400/225',
    views: 950,
    duration: '07:30'
  },
  {
    id: 6,
    title: '东莞理工学院宣传片2024',
    thumbnail: 'https://picsum.photos/400/225',
    views: 3000,
    duration: '05:45'
  }
]
</script>

<template>
  <div class="video-grid">
    <VideoCard
      v-for="video in videos"
      :key="video.id"
      :title="video.title"
      :thumbnail="video.thumbnail"
      :views="video.views"
      :duration="video.duration"
    />
  </div>
</template>

<style scoped>
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
  padding: 1rem 0;
}

@media (max-width: 640px) {
  .video-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}
</style>